<template>
  <view class="content">
    <view class="status-card">
      <text class="status-title">服务状态</text>
      <text :class="['status-text', isServiceRunning ? 'running' : '']">{{
        serviceStatus
      }}</text>
    </view>

    <button
      v-if="!isServiceRunning"
      type="primary"
      class="control-button"
      @click="startService"
    >
      开启服务
    </button>
    <button v-else type="warn" class="control-button" @click="stopService">
      结束服务
    </button>

    <view class="log-panel">
      <text class="log-title">实时日志：</text>
      <view v-for="(log, index) in logs" :key="index" class="log-item">{{
        log
      }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const isServiceRunning = ref(false);
const serviceStatus = ref("未开始");
const logs = ref<string[]>([]);

const addLog = (message: string) => {
  const time = new Date().toLocaleTimeString();
  logs.value.unshift(`${time}: ${message}`);
  if (logs.value.length > 20) {
    logs.value.pop();
  }
};

// 开启服务
const startService = () => {
  console.log("准备开启服务");
  isServiceRunning.value = true;
  serviceStatus.value = "服务中";
  addLog("服务已开启");
  // 后续将在这里调用定位和录音功能
};

// 结束服务
const stopService = () => {
  console.log("准备结束服务");
  isServiceRunning.value = false;
  serviceStatus.value = "已结束";
  addLog("服务已结束");
  // 后续将在这里停止定位和录音功能
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.status-card {
  width: 90%;
  padding: 20px;
  border-radius: 10px;
  background-color: #f7f7f7;
  text-align: center;
  margin-bottom: 40px;
  border: 1px solid #eee;
}

.status-title {
  font-size: 16px;
  color: #666;
}

.status-text {
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
  color: #999;
}

.status-text.running {
  color: #18bc37;
}

.control-button {
  width: 80%;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
}

.log-panel {
  width: 90%;
  margin-top: 40px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  font-size: 12px;
  color: #999;
  height: 200px;
  overflow-y: auto;
}

.log-title {
  font-weight: bold;
  color: #666;
  display: block;
  margin-bottom: 10px;
}

.log-item {
  margin-bottom: 5px;
}
</style>
